<template>
    <div class="data-content">
        <div class="datas_tab">
             <div class="li" v-for="(item, index) in lianghaocount.count" :key="index">
                <span @click.stop="getLiangHaoList(item.title, item.dataUrl, item.dataTx)">{{ item.title }}<span class="val" v-if="item.value"> ({{item.value}}) </span></span>
            </div>
        </div>
        <div v-if="title == '行政与技术负责人'">
            <div style="font-size: 12pt;height: 40px; line-height: 40px; border: 1px solid #ddd; box-sizing: border-box;padding-left:20px;color:#348bda;margin-top:10px;border-bottom:0px">
                <i class="icon ion-ios-color-wand"></i>法定代表人
            </div>
            <table class="layui-table">
                <colgroup>
                    <col width="200">
                    <col width="200">
                    <col width="120">
                    <col>
                    <col width="160">
                    <col width="160">
                    <col width="120">
                </colgroup>
                <tbody>
                    <tr v-for="(row, index) in table0Data.slice(0, 2)" :key="index">
                        <th>{{ row[0].title }}</th>
                        <td>{{row[0].value}}</td>
                        <th>{{ row[1].title }}</th>
                        <td>{{row[1].value}}</td>
                        <th>{{ row[2].title }}</th>
                        <td>{{row[2].value}}</td>
                    </tr>
                </tbody>
            </table>
            <div style="font-size: 12pt;height: 40px; line-height: 40px; border: 1px solid #ddd; box-sizing: border-box;padding-left:20px;color:#348bda;margin-top:10px;border-bottom:0px">
                <i class="icon ion-ios-color-wand"></i>单位负责人
            </div>
            <table class="layui-table">
                <colgroup>
                    <col width="200">
                    <col width="200">
                    <col width="120">
                    <col>
                    <col width="160">
                    <col width="160">
                    <col width="120">
                </colgroup>
                <tbody>
                <tr v-for="(row, index) in table0Data.slice(2, 4)" :key="index">
                    <th>{{ row[0].title }}</th>
                    <td>{{row[0].value}}</td>
                    <th>{{ row[1].title }}</th>
                    <td>{{row[1].value}}</td>
                    <th>{{ row[2].title }}</th>
                    <td>{{row[2].value}}</td>
                </tr>
                </tbody>
            </table>
            <div style="font-size: 12pt;height: 40px; line-height: 40px; border: 1px solid #ddd; box-sizing: border-box;padding-left:20px;color:#348bda;margin-top:10px;border-bottom:0px">
                <i class="icon ion-ios-color-wand"></i>技术负责人
            </div>
            <table class="layui-table">
                <colgroup>
                    <col width="60">
                    <col width="200">
                    <col width="120">
                    <col>
                    <col width="160">
                    <col width="160">
                    <col width="120">
                </colgroup>
                <thead>
                <tr>
                    <th v-for="(item, index) in table1Data.titles" :key="index">{{ item }}</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(trContent, index) in table1Data.list" :key="index">
                    <td v-for="(colName, colNum) in table1Data.titles" :key="colNum">
                        <div v-if="trContent.trContents[0].colVal != '没有记录'">
                            {{ trContent.trContents[colNum].colVal }}
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <div style="font-size: 12pt;height: 40px; line-height: 40px; border: 1px solid #ddd; box-sizing: border-box;padding-left:20px;color:#348bda;margin-top:10px;border-bottom:0px">
                <i class="icon ion-ios-color-wand"></i>管理团队
            </div>
            <table class="layui-table">
                <colgroup>
                    <col width="60">
                    <col width="200">
                    <col width="120">
                    <col>
                    <col width="160">
                    <col width="160">
                    <col width="120">
                </colgroup>
                <thead>
                <tr>
                    <th v-for="(item, index) in table2Data.titles" :key="index">{{ item }}</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(trContent, index) in table2Data.list" :key="index">
                    <td v-for="(colName, colNum) in table2Data.titles" :key="colNum">
                        <div v-if="trContent.trContents[0].colVal != '没有记录'">
                            {{ trContent.trContents[colNum].colVal }}
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <div style="font-size: 12pt;height: 40px; line-height: 40px; border: 1px solid #ddd; box-sizing: border-box;padding-left:20px;color:#348bda;margin-top:10px;border-bottom:0px">
                <i class="icon ion-ios-color-wand"></i>在职员工总数
            </div>
            <table class="layui-table">
                <colgroup>
                    <col width="60">
                    <col width="200">
                    <col width="120">
                    <col>
                    <col width="160">
                    <col width="160">
                    <col width="120">
                </colgroup>
                <thead>
                <tr>
                    <th v-for="(item, index) in table3Data.titles" :key="index">{{ item }}</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(trContent, index) in table3Data.list" :key="index">
                    <td v-for="(colName, colNum) in table3Data.titles" :key="colNum">
                        <div v-if="trContent.trContents[0].colVal != '没有记录'">
                            {{ trContent.trContents[colNum].colVal }}
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div v-else>
            <div style="font-size: 12pt;height: 40px; line-height: 40px; border: 1px solid #ddd; box-sizing: border-box;padding-left:20px;color:#348bda;margin-top:10px;border-bottom:0px">
                <i class="icon ion-ios-color-wand"></i>{{title}}
            </div>
            <table class="layui-table">
                <colgroup>
                    <col width="60">
                    <col width="200">
                    <col width="120">
                    <col>
                    <col width="160">
                    <col width="160">
                    <col width="120">
                </colgroup>
                <thead>
                <tr>
                    <th v-for="(item, index) in titles" :key="index">{{ item }}</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(trContent, index) in lianghao" :key="index">
                    <td v-for="(colName, colNum) in titles" :key="colNum">
                        <div v-if="trContent.trContents[0].colVal != '没有记录'">
                            {{ trContent.trContents[colNum].colVal }}
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <el-link type="info" :underline="false">*此数据来源于全国水利建设市场信用信息平台官方网站</el-link>
        </div>
    </div>
</template>

<script>

export default {

    props: {
        shuiliComId: {
            type: String,
            default: "",
        },
        projectId: {
            type: String,
            default: "",
        },
    },
    data: () => ({
        lianghaocount: [],
        lianghao: [],
        titles: [],
        title: '',
        table0Data:[],
        table1Data:[],
        table2Data:[],
        table3Data:[]
    }),
    watch:{
        shuiliComId:{
            handler(n,o){
                this.getLiangHaoCount();
            },
            deep:true,
        }
    },
    methods: {
        // 获取良好记录汇总数据
        getLiangHaoCount() {
            var that = this;
            if(!that.shuiliComId){return}
            this.$ajax({
                type: "get",
                url: `${this.$store.state.api.searchUrl}/searchshuili/shuili/renyuancount`,
                data: {
                    comId: that.shuiliComId,
                    projectId: that.projectId,
                },
                callback: function (data, res) {
                    that.lianghaocount = data;
                    if(data && data.count.length > 0){
                        var item = data.count[0]
                        that.getLiangHaoList(item.title, item.dataUrl, item.dataTx)
                    }
                },
            });
        },
        //获取企业基本信息
        getLiangHaoList(lianghaoType, dataUrl, dataTx) {
            this.title = lianghaoType
            var that = this;
            this.$ajax({
                type: "get",
                url: `${this.$store.state.api.searchUrl}/searchshuili/shuili/renyuanlist`,
                data: {
                    dataUrl: dataUrl,
                    dataTx: dataTx,
                    projectId: that.projectId,
                },
                callback: function (data, res) {
                    that.lianghao = data.table0.list;
                    that.titles = data.table0.titles
                    that.table0Data = data.table0;
                    that.table1Data = data.table1;
                    that.table2Data = data.table2;
                    that.table3Data = data.table3;
                },
            });
        },
    },
    mounted() {
        this.getLiangHaoCount();
    },
};
</script>

<style scoped lang="scss">
.data-content {
    .datas_tab {
        display: flex;
        float: none;
        margin-left: 8px;
        margin-bottom: 4px;
        .li {
            display: block;
            float: left;
            margin-left: 8px;
            font-size: 14px;
            height: 29px;
            line-height: 29px;
            padding: 0px 2px;
            cursor: pointer;
            .val{
               font-style: italic;
                color: #348bda;
            }
        }
        .active{
            color: #fff;
    background: #348bda;
    text-decoration: none;
        }
    }
    // border-bottom: 1px solid #efefef;
    padding: 20px 15px;
    .layui-table {
        width: 100%;
        border-collapse: collapse;
    }
    .layui-table td,
    .layui-table th {
        padding: 12px 10px;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 15px;
    }
    .layui-table tr th {
        background: #f9f9f9;
        color: #333;
        position: inherit;
    }
}
</style>
